<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta content="yes" name="apple-mobile-web-app-capable">
		<meta content="black" name="apple-mobile-web-app-status-bar-style">
		<meta content="telephone=no" name="format-detection">
		<meta content="email=no" name="format-detection">
		<title>我的寝室</title>
		<link rel="stylesheet" href="css/index.css" />
		<script src="js/adaptation.js"></script>
	</head>
	<body>
		<!--引导层-->
		<div class="guid">
			<ul class="box-list">
				<li>
					<div class="title">大哥大<span class="status">未完善</span></div>
					<div class="ui-box ui-box-2">
						<p><i class="ui-plus-2"></i><br />完善个人信息<br />才能邀请室友哦</p>
					</div>
				</li>
				<li>
					<div class="ui-box ui-box-2 share">
						<p><i class="ui-plus-2"></i><br />等待邀请</p>
					</div>
				</li>
			</ul>
			<div class="ui-step-1"></div>
			<div class="ui-step-2"></div>
			<div class="ui-step-3"></div>
		</div>
		
		<div id="wrap">
			<div class="main">
				<!--此乃头部-->
				<div id="header">
					<div class="dorminfo clearfix">
						<div class="dormcover">
							<img src="img/cover.png" alt="" />
							<!--男寝class为ui-boy,女寝class为ui-girl-->
							<span class="sex ui-boy"></span>
						</div>
						<div class="desc">
							<p class="p1">东海小鸡鸡<span class="type">别墅</span></p>
							<p>诺丁汉<span class="num">房间编号：01123</span></p>
						</div>
						
						<!--查看我的寝室信息   进入默认页时需要隐藏-->
						<a href="javascript:void(0);" class="detail"></a>
					</div>
					
					<!--页卡，默认隐藏-->
					<ul class="tabs">
						<li>
							<a href="javascript:void(0);" class="txt-tab-1">申请信息<i class="ui-bubble">99</i></a>
						</li>
						<li>
							<a href="javascript:void(0);" class="txt-tab-2">奖品信息</a>
						</li>
						<li>
							<a href="javascript:void(0);" class="txt-tab-3 cur">我的盟友</a>
						</li>
					</ul>
				</div>
				
				<!--默认页-->
				<div class="default visible">
					<div class="tip-box">
						寝室成员满3人并完善资料之后可免费领取爱奇艺会员月卡1张
						<a href="javascript:void(0);" class="ui-get-card"></a>
					</div>
					
					<!--室友有信息时显示result-box,隐藏ui-box-->
					
					<ul class="box-list">
						<li>
							<!--<div class="result-box">
								<div class="title">大哥大</div>
								<div class="img-box">
									<img src="img/avatar.jpg" alt="" />
								</div>
							</div>-->
							<div class="ui-box">
								<div class="title">大哥大<span class="status">未完善</span></div>
								<a href="perfect.html">
									<div class="ui-box-blue">
										<p><i class="ui-plus-blue"></i><br />完善个人信息<br />才能邀请室友哦</p>
									</div>
								</a>
							</div>
						</li>
						
						<!--有室友时第二排 ui-box 添加share可邀请,默认不添加-->
						<li>
							<!--<div class="result-box">
								<div class="title">老二</div>
								<div class="img-box">
									<img src="img/avatar.jpg" alt="" />
								</div>
							</div>-->
							<div class="ui-box ui-box-1">
								<p><i class="ui-plus-1"></i><br />等待邀请</p>
							</div>
						</li>
						<li>
							<div class="ui-box ui-box-1">
								<p><i class="ui-plus-1"></i><br />等待邀请</p>
							</div>
						</li>
						<li>
							<div class="ui-box ui-box-1">
								<p><i class="ui-plus-1"></i><br />等待邀请</p>
							</div>
						</li>
					</ul>
					
					<!--邀请更多，默认页时需隐藏-->
					<a href="javascript:void(0);" class="share invite-more">邀请更多+</a>
				</div>
				
				<!--页卡内容，默认隐藏-->
				<div id="tab-container">
					<!--申请信息-->
					<div class="tab-content" style="display: none;">
						<ul class="apply-list ui-list">
							<li class="clearfix">
								<a href="detail.html">
									<div class="dormcover">
										<img src="img/cover.png" alt="" />
										<!--男寝class为ui-boy2,女寝class为ui-girl2-->
										<span class="sex ui-boy2"></span>
									</div>
									<div class="desc">
										<span class="type">别墅</span>
										<p class="dormname">EDGCclearlove</p>
										<p>诺丁汉<span class="num">房间编号：01123</span></p>
									</div>
								</a>
								
								<div class="btn-group">
									<a href="javascript:void(0);" class="agree" data-type="1" data-id="123"><i></i>同意</a>
									<a href="javascript:void(0);" class="refuse" data-type="2" data-id="123"><i></i>拒绝</a>
								</div>
							</li>
							
							<li class="clearfix">
								<a href="javasccript:void(0);">
									<div class="dormcover">
										<img src="img/cover.png" alt="" />
										<span class="sex ui-girl2"></span>
									</div>
									<div class="desc">
										<span class="type">别墅</span>
										<p class="dormname">EDGCclearlove</p>
										<p>诺丁汉<span class="num">房间编号：01123</span></p>
									</div>
								</a>
								<div class="btn-group">
									<a href="javascript:void(0);" class="agree" data-type="1" data-id="456"><i></i>同意</a>
									<a href="javascript:void(0);" class="refuse" data-type="2" data-id="456"><i></i>拒绝</a>
								</div>
							</li>
						</ul>
					</div>
					
					<!--奖品列表-->
					<div class="tab-content" style="display: none;">
						<ul class="prize-list">
							<!--奖品为爱奇艺时class为ui-aqy，其他类型奖品class为ui-other-->
							<li class="clearfix ui-aqy">
								<div class="logo-box">
									<img src="img/aqy.png" alt="" />
								</div>
								<div class="desc">
									<h3 class="title">爱奇艺会员月卡</h3>
									<p>点击查看详情<a href="javascript:void(0);" class="view" data-title="爱奇艺会员月卡" data-content="这是爱奇艺会员月卡内容">查看</a></p>
								</div>
							</li>
							
							<li class="clearfix ui-other">
								<div class="logo-box">
									<img src="img/yxc.png" alt="" />
								</div>
								<div class="desc">
									<h3 class="title">热血高校MVP通行证</h3>
									<p>点击查看详情<a href="javascript:void(0);" class="view" data-title="热血高校MVP通行证" data-content="这是热血高校MVP通行证内容">查看</a></p>
								</div>
							</li>
						</ul>
					</div>
					
					<!--我的盟友-->
					<div class="tab-content">
						<ul class="ally-list ui-list">
							<li class="clearfix">
								<a href="detail.html">
									<div class="dormcover">
										<img src="img/cover-2.png" alt="" />
										<span class="sex ui-girl2"></span>
									</div>
									<div class="desc">
										<span class="type">土坑</span>
										<p class="dormname">EDGCclearlove</p>
										<p>诺丁汉<span class="num">房间编号：01123</span></p>
									</div>
								</a>
								<div class="btn-group">
									<a href="javascript:void(0);" class="lottery"><i></i>抽奖</a>
								</div>
							</li>
							
							<li class="clearfix">
								<a href="detail.html">
									<div class="dormcover">
										<img src="img/cover.png" alt="" />
										<span class="sex ui-boy2"></span>
									</div>
									<div class="desc">
										<span class="type">土坑</span>
										<p class="dormname">EDGCclearlove</p>
										<p>诺丁汉<span class="num">房间编号：01123</span></p>
									</div>
								</a>
								<div class="btn-group">
									<a href="javascript:void(0);" class="lottery completed">已抽奖</a>
								</div>
							</li>
						</ul>
					</div>
				</div>
				
				<!--此乃底部-->
				<div id="footer">
					<a href="hall.html">宿管大厅</a>
					<a href="intro.html">活动说明</a>
					<a href="mydorm.html" class="cur">我的寝室</a>
				</div>
			</div>
		</div>
		
		<!--弹窗-->
		<div style="display: none;">
			<!--中奖-->
			<div id="success-box" class="lottery-box">
				<a href="javascript:void(0);" class="ui-layer-close layer-close"></a>
				<div class="title txt-congratulation"></div>
				<p class="prizeName"></p>
				<p class="info">要和室友一起分享哦</p>
				<div class="btn-group">
					<a href="javascript:void(0);" class="ui-back layer-close"></a>
				</div>
			</div>
			
			<!--未中奖-->
			<div id="fail-box" class="lottery-box">
				<a href="javascript:void(0);" class="ui-layer-close layer-close"></a>
				<div class="title txt-sorry"></div>
				<p class="info">勾搭其他寝室更重要哦！</p>
				<div class="btn-group">
					<a href="javascript:void(0);" class="ui-back layer-close"></a>
				</div>
			</div>
			
			<!--领取爱奇艺成功-->
			<div id="aqy-success-box">
				<a href="javascript:void(0);" class="ui-layer-close layer-close"></a>
				<div class="txt-get"></div>
				<div class="btn-group">
					<a href="javascript:void(0);" class="ui-get"></a>
				</div>
			</div>
			
			<!--领取爱奇艺失败-->
			<div id="aqy-fail-box">
				<a href="javascript:void(0);" class="ui-layer-close layer-close"></a>
				<div class="txt-failed"></div>
				<div class="btn-group">
					<a href="javascript:void(0);" class="ui-invited"></a>
				</div>
			</div>
			
			<!--奖品详情-->
			<div id="detail-box">
				<div class="title">印象城热血高校MVP通行证</div>
				<div class="txt-gl"></div>
				<div class="scroll">
					<div class="content">
						注册成为商场会员即可激活通行证，领取开学季限量礼品一份(马克杯/龙猫台灯)
					</div>
				</div>
				<div class="btn-group">
					<a href="javascript:void(0);" class="ui-close layer-close"></a>
				</div>
			</div>
		</div>
		
		<!--抽奖中-->
		<div id="lottery-box">
			<div class="txt-lottery"></div>
		</div>
		
		<!--分享-->
		<div class="share-box">
			<img src="img/share.png" alt="" />
		</div>
		
		<!--奖品模板-->
		<script type="text/html" id="prizeTpl">
			<li class="clearfix ui-other">
				<div class="logo-box">
					<img src="<%logo%>" alt="" />
				</div>
				<div class="desc">
					<h3 class="title"><%prizeName%></h3>
					<p>点击查看详情<a href="javascript:void(0);" class="view" data-title="<%prizeName%>" data-content="<%desc%>">查看</a></p>
				</div>
			</li>
		</script>
		
		<script src="js/zepto.min.js"></script>
		<script src="js/layer/layer.js"></script>
		<script src="js/template.js"></script>
		<script src="js/iscroll.js"></script>
		<script src="js/common.js"></script>
		<script>
			$(function(){
				template.config('openTag','<%');
				template.config('closeTag','%>');
				
				var isDefault = false;   //是否进入默认页
				var isFirst = true;     //是否初次创建后进入
				
				if(isDefault){
					$(".default").show();
					$(".tabs").removeClass("show");
					$("#tab-container").hide();
					if(isFirst){
						$(".guid").show();
						setTimeout(function(){
							$(".guid").addClass("show");
						},30)
					}
				}else{
					$(".default").hide();
					$(".tabs").addClass("show");
					$("#tab-container").show();
				}
				
				//关闭引导层
				$(".guid").click(function(){
					$(this).removeClass("show");
					setTimeout(function(){
						$(".guid").hide();
					},300)
				});
				
				//领卡
				$(".ui-get-card").click(function(){
					$.ajax({
						type: "get",
						data: {},
						dataType: "json",
						url: "data/getCard.json",
						success: function(data){
							if(data.status==true){
								//可以领取爱奇艺
								layer.open({
									content: $("#aqy-success-box")[0].outerHTML,
									shadeClose: false,
									className: "layer-border"
								});
							}else{
								//不可以领取爱奇艺
								layer.open({
									content: $("#aqy-fail-box")[0].outerHTML,
									shadeClose: false,
									className: "layer-border"
								});
							}
						}
					});
				});
				
				//点击领取
				$(document).on('click','.ui-get',function(){
					$.ajax({
						type: "get",
						data: {},
						dataType: "json",
						url: "data/lottery.json",
						success: function(data){
							if(data.status){
								//返回奖品信息，渲染到奖品信息中
								layer.closeAll();
								remind("领取成功");
							}
						}
					})
				});
				
				//邀请室友
				$(document).on('click','.ui-invited,.share',function(){
					layer.closeAll();
					$(".share-box").show();
					setTimeout(function(){
						$(".share-box").addClass("show");
					},100);
				});
				
				//关闭分享
				$(".share-box").click(function(){
					$(this).removeClass("show");
					setTimeout(function(){
						$(".share-box").hide();
					},300);
				});
				
				//页卡切换
				$(".tabs a").click(function(){
					if($(".default").hasClass("visible")){
						$(".default").removeClass("visible").hide();
						$("#tab-container").show();
						$(".detail").show();
					}
					var index = $(this).parent().index();
					var isCur = $(this).hasClass("cur");
					if(isCur){
						return;
					}
					$(".tabs a").removeClass("cur");
					$(this).addClass("cur");
					$(".tab-content").hide();
					$(".tab-content").eq(index).show();
				});
				
				//抽奖
				$(document).on('click','.lottery',function(){
					var instance = this;
					var isCompleted = $(this).hasClass("completed");
					if(isCompleted){
						return;
					}
					$("#lottery-box").show();
					$.ajax({
						type: "get",
						data: {},
						dataType: "json",
						url: "data/lottery.json",
						success: function(data){
							$(".prizeName").text(data.prizeName);
							var html = template('prizeTpl',data);
							$(".prize-list").append(html);
							setTimeout(function(){
								if(data.status){
									layer.open({
										content: $("#success-box")[0].outerHTML,
										shadeClose: false,
										className: "layer-border"
									});
								}else{
									layer.open({
										content: $("#fail-box")[0].outerHTML,
										shadeClose: false,
										className: "layer-border"
									});
								}
								$(instance).addClass("completed");
								$(instance).text("已抽奖");
								$("#lottery-box").hide();
							},3000);
						}
					})
				});
				
				//查看奖品详情
				$(document).on('click','.view',function(){
					var title = $(this).data('title');
					var content = $(this).data('content');
					$("#detail-box .title").text(title);
					$("#detail-box .content").html(content);
					layer.open({
						content: $("#detail-box")[0].outerHTML,
						shadeClose: false,
						className: "layer-detail"
					});
					setTimeout(function(){
						var myScroll = new IScroll('.layermbox .scroll',{ 
							scrollY: true,
							scrollbars: 'custom',
							preventDefaultException: { tagName: /^(DIV|IMG|A|BUTTON|INPUT)$/ }
						});
					},30);
				});
				
				//同意&&拒绝  同意状态1，拒绝状态2
				$(".agree,.refuse").click(function(){
					var type = $(this).data("type");
					var id = $(this).data('id');
					var instance = this;
					$.ajax({
						type: "get",
						data: {type:type,id:id},
						dataType: "json",
						url: "data/agree.json",
						success: function(data){
							if(type=="1"){
								var li = $(instance).parents("li");
								$(instance).parent().html('<a href="javascript:void(0);" class="lottery"><i></i>抽奖</a>');
								$(".ally-list").prepend(li)
							}else{
								$(instance).parents("li").remove();
							}
							$(".ui-bubble").text(Number($(".ui-bubble").text())-1);
						}
					});
				});
				
				//查看寝室信息
				$(".detail").click(function(){
					$(".tabs .cur").removeClass("cur");
					$("#tab-container").hide();
					$(".default").show().addClass("visible");
					$(this).hide();
				});
			});
		</script>
	</body>
</html>
